<template>
	<view>
		<!--关联信息-->
		<view class="btName">系统消息详情</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">消息类型</text>
			<view class="width276 color333 flexC" v-if="infoObj.bus_type_name">
				<text class="blueColor">{{infoObj.bus_type_name}}</text>
			</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">消息内容</text>
			<view v-if="infoObj.bus_name" class="width276 color333">
				<text class="blueColor">{{infoObj.bus_name}}</text>
			</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">创建人员</text>
			<view v-if="infoObj.create_user_name" class="width276 color333">
				<text class="blueColor">{{infoObj.create_user_name}}</text>
			</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">创建时间</text>
			<view v-if="infoObj.create_time" class="width276 color333">
				<text class="blueColor">{{infoObj.create_time}}</text>
			</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">处理状态</text>
			<view class="width276 color333">
				<text class="blueColor">{{infoObj.deal_status == 1 ? '已处理' : '未处理'}}</text>
			</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5" v-if="infoObj.deal_time">
			<text class="mr26">处理时间</text>
			<view class="width276 color333">
				<text class="blueColor">{{infoObj.deal_time}}</text>
			</view>
		</view>
		
		<!--基础信息-->
		<view class="btName">消息详情</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text>{{infoObj.bus_name || '暂无详细内容'}}</text>
		</view>
		
		<!--操作按钮-->
		<view class="submitView" v-if="infoObj.deal_status == 0">
			<u-button type="primary" class="submitBtn" :ripple="true" ripple-bg-color="#007AFF" @click="setDealStatusFun">
				标记为已处理</u-button>
		</view>
		<view class="submitView" v-else>
			<u-button type="default" class="submitBtn" :ripple="true" ripple-bg-color="#909399" disabled>
				已处理</u-button>
		</view>
		
	</view>
</template>

<script>
	let that = ''
	import { apiSysMsg } from '@/api/admin.js'
	export default {
		data() {
			return {
				infoObj: {},
				cardIndex: 0
			}
		},
		onLoad(e) {
			that = this;
			that.infoObj = uni.$sysMsgInfo || {}
			that.cardIndex = e.index;
			
			// 如果没有传递数据，尝试通过ID获取
			if (!that.infoObj.id && e.id) {
				that.getSysMsgById(e.id);
			}
		},
		methods: {
			// 根据ID获取系统消息详情
			getSysMsgById: function(id) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let reqData = {
					action: 'get_list',
					params: {
						matchObj: {
							id: id
						},
						pageSize: 1
					}
				}
				apiSysMsg(reqData)
					.then(res => {
						if (res.data.data && res.data.data.length > 0) {
							that.infoObj = res.data.data[0];
						}
						setTimeout(() => {
							uni.hideLoading()
						}, 188);
					})
			},
			// 设置为已处理状态
			setDealStatusFun: function() {
				uni.showModal({
					title: '提示',
					content: '是否确认将消息标记为已处理？',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中...',
								mask: true
							})
							let reqData = {
								action: 'set_deal',
								params: {
									req: {
										id: that.infoObj.id
									}
								}
							}
							apiSysMsg(reqData)
								.then(res => {
									uni.showToast({
										title: '标记成功！',
										duration: 1600,
										icon: 'none',
										mask: true
									})
									// 更新状态
									that.infoObj.deal_status = 1;
									that.infoObj.deal_time = new Date().toLocaleString();
									// 发送更新事件到列表页
									uni.$emit('updateSysMsgStatus', {
										index: that.cardIndex,
										deal_status: 1,
										deal_time: that.infoObj.deal_time
									})
								})
						}
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
		padding-bottom: 88px;
	}

	.color333 {
		color: #666666;
	}

	.btName {
		margin-left: 26rpx;
		margin-top: 32rpx;
		margin-bottom: 16rpx;
		font-size: 16px;
		font-weight: bold;
	}

	.flexC {
		display: flex;
		align-items: center;
	}

	.p8Img {
		padding: 8rpx;
		width: 40rpx;
		height: 40rpx;
		margin-left: 16rpx;
	}

	.p8 {
		padding: 8rpx;
	}

	.noMoreTs {
		width: 100%;
		margin: 32rpx 0;
		text-align: center;
	}

	.submitView {
		width: 100%;
		padding: 16rpx 0 26rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1rpx solid #f1f1f1;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
	}

	.submitBtn {
		width: 666rpx;
	}
</style>